<template>
    <div>
        <el-divider content-position="left">列表列配置</el-divider>
        <el-table :data="tableColumns" stripe border>
            <el-table-column prop="prop" label="字段名"></el-table-column>
            <el-table-column prop="label" label="列标题"></el-table-column>
            <el-table-column prop="type" label="列类型"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="editColumn(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteColumn(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-top: 20px;">
            <el-col :span="24" style="text-align: right;">
                <el-button type="primary" @click="addColumn">添加列表列</el-button>
            </el-col>
        </el-row>
        <!-- 列配置对话框 -->
        <el-dialog :visible.sync="columnDialogVisible"  title="列配置">
            <el-form ref="form" :model="currentColumn" :rules="rules" label-width="120px">
                <el-form-item label="列类型" prop="type">
                    <el-select v-model="currentColumn.type" placeholder="请选择列类型">
                        <el-option v-for="type in columnTypes" :key="type.value" :label="type.label"
                            :value="type.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="字段名" prop="prop">
                    <el-input v-model="currentColumn.prop"></el-input>
                </el-form-item>
                <el-form-item label="列标题" prop="label">
                    <el-input v-model="currentColumn.label"></el-input>
                </el-form-item>
                <el-form-item label="ID过滤函数名" v-if="['isID'].includes(currentColumn.type)" prop="getFunName">
                    <el-input v-model="currentColumn.getFunName" placeholder="请输入过滤函数名"></el-input>
                </el-form-item>
                <el-form-item label="宽度">
                    <el-input v-model="currentColumn.width" placeholder="请输入列宽度"></el-input>
                </el-form-item>
                <el-form-item label="对齐方式">
                    <el-radio-group v-model="currentColumn.align">
                        <el-radio label="left">左对齐</el-radio>
                        <el-radio label="center">居中对齐</el-radio>
                        <el-radio label="right">右对齐</el-radio>
                    </el-radio-group>
                </el-form-item>


                <!-- 格式化配置 - 仅对需要格式化的列类型显示 -->
                <el-form-item label="自定义内容" v-if="['custom'].includes(currentColumn.type)">
                    <el-input type="textarea" :rows="4" v-model="currentColumn.formatter"
                        placeholder="自定义内容"></el-input>
                </el-form-item>
                <el-form-item label="是否可排序">
                    <el-switch v-model="currentColumn.sortable"></el-switch>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="columnDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveColumn">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'listConfig',//列表配置项
    components: {},
    props: {
        value: {}
    },
    data() {
        return {
            rules: {
                type: { required: true, message: '请选择类型', trigger: 'change' },
                prop: { required: true, message: '请输入字段名', trigger: 'blur' },
                label: { required: true, message: '请输入列标题', trigger: 'blur' },
                getFunName: { required: true, message: '请输入过滤函数名', trigger: 'blur' },
            },
            tableColumns: [],
            columnDialogVisible: false,
            currentColumn: {
                prop: '',
                label: '',
                type: 'text',
                width: '',
                align: 'left',
                sortable: false,
                formatter: '',
                getFunName: '',
            },
            columnTypes: [
                { value: 'maxtText', label: '过长文本' },
                { value: 'text', label: '文本' },
                { value: 'date', label: '日期时间' },
                { value: 'image', label: '图片' },
                { value: 'isID', label: 'id取name' },
                { value: 'operation', label: '操作' },
                { value: 'custom', label: '自定义' }
            ],
        }
    },
    watch: {},
    computed: {},
    created() {
        if (this.value) {
            this.currentColumn = this.value
        }
    },
    mounted() { },
    methods: {
        addColumn() {
            this.currentColumn = {
                prop: '',
                label: '',
                type: 'text',
                width: '',
                align: 'center',
                sortable: false,
                formatter: '',
                getFunName: ''
            };
            this.columnDialogVisible = true;
        },

        editColumn(index, row) {
            this.currentColumn = Object.assign({}, row);
            this.columnDialogVisible = true;
        },

        deleteColumn(index) {
            this.$confirm('确定删除该列吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.tableColumns.splice(index, 1);
                this.modelValue()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },

        saveColumn() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const columnIndex = this.tableColumns.findIndex(column => column.prop === this.currentColumn.prop);
                    if (columnIndex > -1) {
                        // 更新现有列
                        this.tableColumns.splice(columnIndex, 1, this.currentColumn);
                    } else {
                        // 添加新列
                        this.tableColumns.push(Object.assign({}, this.currentColumn));
                    }
                    this.columnDialogVisible = false;
                    this.modelValue()
                    this.$message({
                        type: 'success',
                        message: '列配置保存成功!'
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        modelValue() {
            this.$emit('change', this.tableColumns)
            this.$emit('input', this.tableColumns)
        }
    },
}
</script>
<style lang="scss" scoped></style>
